Skip to main content

Flex Layout

This component is a layout component. It allows layouts using CSS Flexbox. It is more advanced than Grid Layout, and is harder to setup. Most layouts can be achieved with Grid Layout.

This layout can be used to create left/center/right-aligned layouts, layouts with children that 'wrap' onto the next line if the display is too small, and much more.

Properties​

Number of elements​

Number of children to accept.

Flex Direction​

Whether to layout the children in rows, or in columns.

Align Items​

How to align it's children in the direction perpendicular to Flex Direction (i.e. if Flex Direction is Row, then the vertical alignment of the children). There are a few options, but the most commonly used are:

  • Start: start-align (i.e. left-align or top-align)
  • Center: center-align

Justify Content​

How to align it's children, in the direction parallel to Flex Direction (i.e. if Flex Direction is Row, then the horizontal alignment of the children). There are a few options, but the most commonly used are:

  • Start: start-align (i.e. left-align or top-align)
  • Center: center-align
  • Space Between: space the children apart, to maximize the space in-between the children.

Align Content​

This is an advanced property, out-of-scope of this guide.

Wrapping​

This defines how the children of the layout will wrap onto the next line (i.e. if displayed on a small screen, you may want the components to 'wrap' to the next row, instead of being squished). This is an advanced property, and should be used alongside Children dimensions. Basically - if you define a minWidth or minHeight for each child using Children dimensions, then Flex Layout will 'wrap' the child onto the next line if the minWidth/minHeight cannot be satisfied on the first line.

Options:

  • No wrapping: disable wrapping
  • Wrap: enable wrapping

Children dimensions​

An array of objects of the form: { width, minWidth, maxWidth, height, minHeight, maxHeight, flexGrow, flexShrink }. Each item in the array is applied to the corresponding child in the layout (i.e. the first entry is applied to the first child). flexGrow & flexShrink accepts numbers. All other attributes accept any CSS units.

The use of each of these attributes is out-of-scope of this guide. See Wrapping for a basic use-case.

Ex:

[{ "minWidth": "10rem" }, { "minWidth": "5rem" }]